<template>
	<view class="chat">
		<!-- <view class="topname">{{name}}</view> -->
		<!-- 私信部分 -->
		<view class="chat-popup-content">
			<!-- 内容部分 -->
			<view class="section" id="chat-content" v-if="chatlist.length !== 0">
				<scroll-view :scroll-into-view="scrollToView" id="scrollview" :scroll-with-animation="true"
					scroll-y="true" style="height: 100%;">
					<view class="content" v-for="item in chatlist" :key="item._id" :id="'msg'+item._id">
						<view class="left" v-if="item.my_id._id == id && item.other_id._id == sid ">
							<view class="img">
								<image lazy-load="true"
									style="width: 100%;height: 100%; background-color: #eeeeee;border-radius: 50%;"
									:mode="'scaleToFill'" :src="item.my_id.avater" @error="imageError"></image>
							</view>
							<view class="content">
								{{ item.content }}
							</view>
						</view>
						<view class="right" v-if="item.my_id._id == sid && item.other_id._id == id">

							<view class="content">
								{{ item.content }}
							</view>
							<view class="img">
								<image lazy-load="true"
									style="width: 100%;height: 100%; background-color: #eeeeee;border-radius: 50%;"
									:mode="'scaleToFill'" :src="item.my_id.avater" @error="imageError"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view style="height: 50px;"></view>
		<view class="bottomAction">
			<view class="main" :style="{ height: '50' + 'px' }">
				<view class="voice">
					<image class="voice-img" src="../../../static/tyh/语音.png"></image>
				</view>
				<input class="textInput" type="text" :value="inputText" cursor-spacing="10" :confirm-hold="true"
					:adjust-position="false" confirm-type="send" @input="getInputText" @confirm="confirmInput" />
				<image class="emojiIcon" v-if='true' src="/static/emoji_icon_01.png"></image>
				<view class="more">
					<image class="more-img" src="../../../static/tyh/加号1.png"></image>
				</view>
			</view>
			<!-- <scroll-view class="emoji" scroll-y="true" v-if="emojiShow"
				:style="{ height: keyboardConfig.height + 'px' }">
				<text class="icon" v-for="(item, index) in emoji" :key="index" @click="selEmoji(item)">{{ item }}</text>
			</scroll-view> -->
		</view>
		<view>
			<!-- <u-upload :action="action" :file-list="fileList"></u-upload> -->
		</view>

	</view>
</template>

<script>
	// import emoji from '@/lib/emoji.js'

	import {
		ref,
		onMounted,
		reactive,
		onUnmounted,
		computed,
		nextTick
	} from 'vue'
	// import {
	// 	pathToBase64
	// } from '../../../js_sdk/mmmm-image-tools/index.js'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	// import WebSocketClass from './utils/websocket.js'
	// const dom = uni.requireNativePlugin('dom');

	export default {

		setup() {
			// let datas = reactive({
			// 	data: []
			// })
			let sid = ref(null) //本地id
			// let type = ref(null)
			// let lImg = ref(null)
			let id = ref(null) //路由跳转页面id
			// let name = ref(null)
			// let img = ref(null)
			// let emoji = ref("")
			// let emojiShow = ref(false)
			// let systemInfo = ref({})
			// let biaoq = ref(null)
			// let keyboardConfig = ref({
			// 	height: 0
			// })
			// let item = ref(null)
			// let bottomActionHeight = ref(54)
			// let chatListHeight = ref(0)
			let inputText = ref('') //输入框文本
			// let chatList = ref([]) //页面渲染数据
			// let timeConnect = ref(0) //断线重连次数
			// let weburl = ref(`ws://localhost:8000/ws?id=${sid.value}`) //WebScoket服务器地址
			// let base64data = ref(null) //图片64链接
			// let basevideo = ref(null)
			let scrollToView = ref(null)
			//接收路由跳转数据
			onLoad((option) => {
				console.log('option::::::::', option.id)
				id.value = option.id
				// name.value = option.name
			});

			//获取数据库聊天数据
			// function getlist() {

			// 	chatList.value = []
			// 	uni.request({
			// 		url: 'http://127.0.0.1:3366/tyh/webscoketlist',
			// 		method: 'GET',
			// 		success: (res) => {
			// 			datas.data = res.data.data
			// 			res.data.data.map(item => {
			// 				// console.log(item, '33333333333')
			// 				if (item.user_id === sid.value && item.from_id === id.value && item
			// 					.content !== '连接成功') {
			// 					chatList.value.push({
			// 						avatar: item.avater,
			// 						content: item.content,
			// 						type: 'right',
			// 						baseimg: item.baseimg,
			// 						basevideo: item.basevideo
			// 					});
			// 				}
			// 				if (item.user_id === id.value && item.from_id === sid.value && item
			// 					.content !== '连接成功') {
			// 					chatList.value.push({
			// 						avatar: item.avater,
			// 						content: item.content,
			// 						type: 'left',
			// 						baseimg: item.baseimg,
			// 						basevideo: item.basevideo
			// 					});
			// 				}

			// 			})
			// 		}
			// 	})
			// }
			let chatlist = computed(() => {
				let arr = uni.$store._state.data.twk.allChatList.filter((item) => {
					return (item.my_id._id == sid.value && item.other_id._id == id.value) || (item.my_id
						._id == id.value && item.other_id._id == sid.value)
				})
				console.log(arr, 'arr::::::::')
				return arr
			})
			//挂在完毕进行本地过去&连接服务器WebSocket
			onMounted(() => {
				uni.$store.dispatch('getAllChatList')
				// setTimeout(() => {
				// 	console.log('store::::::::', uni.$store._state.data.twk.allChatList)
				// 	console.log('chatlist::::::::::', chatlist)
				// }, 2000)

				// getlist()
				let user = uni.getStorageSync("user")
				sid.value = user._id
				// uni.connectSocket({
				// 	url: `ws://localhost:8000/ws?id=${sid.value}`
				// });
				uni.request({
					url: 'http://localhost:3366/tyh/chatupdate',
					method: 'POST',
					data: {
						id: id.value,
						is_read: true
					},
					success: (res) => {
						// console.log(res,'333333333')
						// datas.data = res.data.data
						// this.text = 'request success';
					},
				})
				// scrollTo()
			})

			function scrollTo() {
				// 1.使用wx.createSelectorQuery()查询到需要滚动到的元素位置
				wx.createSelectorQuery().select('#scrollview').boundingClientRect(res => {
					// 到这里，我们可以从res中读到class为bb4的top，即离顶部的距离（px）
					// 2使用wx.pageScrollTo()将页面滚动到对应位置
					console.log(res, '888888888888888')
					wx.pageScrollTo({
						scrollTop: res.height-50, // 滚动到的位置（距离顶部 px）
						// scrollTop: res.top>0?res.top:-res.top, // 滚动到的位置（距离顶部 px）
						duration: 0 //滚动所需时间 如果不需要滚动过渡动画，设为0（ms）
					})
				}).exec()
			}

			//添加数据功能模块
			function confirmInput(e) {

				if (!e.detail.value) {
					uni.showToast({
						title: '内容不能为空',
						duration: 1500,
						position: 'bottom'
					});
					return
				}
				let arr = chatlist.value.filter(item => {
					return item.my_id._id == id.value && item.other_id._id == sid.value
				})
				console.log("arr", arr)
				let goods_id = arr[arr.length - 1].goods_id
				console.log("goods_id", goods_id)
				console.log("id=", id.value, "sid=", sid.value)
				uni.request({
					url: 'http://127.0.0.1:3366/twk/addchat',
					method: 'POST',
					data: {
						my_id: sid.value,
						other_id: id.value,
						goods_id: goods_id,
						content: e.detail.value,
					},
					success: (res) => {
						console.log(res, '333333333')
						if (res.data.code === 200) {
							uni.$store.dispatch('getAllChatList')
							uni.showToast({
								title: "发送成功"
							})
						}
					},
				})
				// 向服务器发送数据API
				// uni.sendSocketMessage({
				// 	data: JSON.stringify({
				// 		value: e.detail.value,
				// 		id: id.value,
				// 		type: '私信',
				// 		mode: 'message',
				// 	}),
				// });
				uni.$websocket.send(JSON.stringify({
					value: e.detail.value,
					otherid: id.value,
					type: '私信',
					mode: 'message',
				}))
				inputText.value = '';
				nextTick(() => {
					scrollTo()

				})
			}


			// function confirmInput(e) {
			// 	if (!e.detail.value) return uni.showToast({
			// 		title: '内容不能为空',
			// 		duration: 1500,
			// 		position: 'bottom'
			// 	});
			// 	chatList.value.push({
			// 		avatar: img.value,
			// 		content: e.detail.value,
			// 		type: 'right'
			// 	});
			// 	//发送请求
			// 	if (sid.value !== id.value) {
			// 		type.value = 'right'
			// 	} else {
			// 		type.value = 'left'
			// 	}
			// 	//思路添加要看他是否连接成功服务器，然后连接成功之后点击感叹号按钮还能再次发送，等等写
			// 	if (weburl.value === 'ws://localhost:8000/ws?id=${sid.value}') {
			// 		uni.request({
			// 			url: 'http://127.0.0.1:3366/tyh/webscoketadd',
			// 			method: 'POST',
			// 			data: {
			// 				user_id: sid.value,
			// 				from_id: id.value,
			// 				type: type.value,
			// 				avater: img.value,
			// 				content: e.detail.value,
			// 				status: true
			// 			},
			// 			success: (res) => {
			// 				// console.log(res,'333333333')
			// 				// datas.data = res.data.data
			// 				// this.text = 'request success';
			// 			},
			// 		})
			// 	} else {
			// 		uni.request({
			// 			url: 'http://127.0.0.1:3366/tyh/webscoketadd',
			// 			method: 'POST',
			// 			data: {
			// 				user_id: sid.value,
			// 				from_id: id.value,
			// 				type: type.value,
			// 				avater: img.value,
			// 				content: e.detail.value,
			// 				status: false
			// 			},
			// 			success: (res) => {
			// 				// console.log(res,'333333333')
			// 				// datas.data = res.data.data
			// 				// this.text = 'request success';
			// 			},
			// 		})
			// 	}
			//向服务器发送数据API
			// uni.sendSocketMessage({
			// 	data: JSON.stringify({
			// 		value: e.detail.value,
			// 		id: id.value,
			// 		type: '私信',
			// 		mode: 'message',
			// 	}),
			// });
			// 	inputText.value = '';
			// 	scrollBottom();
			// }
			//接收服务器WebSocket返回数据API
			// uni.onSocketMessage(function(res) {
			// 	console.log('收到服务器内容：', JSON.parse(res.data));
			// 	let data = JSON.parse(res.data)
			// 	const {
			// 		mode
			// 	} = data
			// 	// console.log('mode:::::',mode)
			// 	if (mode === '') {
			// 		console.log('服务器连接已断开，请重连！！！')
			// 	}
			// 	switch (mode) {
			// 		case 'MESSAGE':
			// 			chatList.value.push({
			// 				avatar: lImg.value,
			// 				content: data.text,
			// 				baseimg: data.bimg,
			// 				basevideo: data.basevideos
			// 			});
			// 			break
			// 		case 'HEART_BEAT':
			// 			console.log('收到服务器心跳机制反应')
			// 	}
			// });
			//WebSocket心跳机制定时器
			// let timer = setInterval(() => {
			// 	uni.sendSocketMessage({
			// 		data: JSON.stringify({
			// 			mode: 'HEART_BEAT'
			// 		}),
			// 	});
			// }, 5000)
			//接收服务器WebSocket错误信息API
			// uni.onSocketError(function(res) {
			// 	console.log('WebSocket服务器连接打开失败，请检查！');
			// 	reconnect(`ws://localhost:8000/ws?id=${sid.value}`)
			// });
			// //接收服务器WebSocket断开连接API
			// uni.onSocketClose(function(res) {
			// 	console.log('WebSocket服务器已关闭！！！');
			// 	reconnect(`ws://localhost:8000/ws?id=${sid.value}`)
			// });

			// websocket断线重连功能模块
			// function reconnect(service) {
			// lockReconnect加锁，防止onclose、onerror两次重连
			// timeConnect.value++;
			// console.log("正在尝试第" + timeConnect.value + "次重连");

			// uni.connectSocket({
			// 	url: service
			// });
			// if (timeConnect.value === 3) {
			// 	service = `ws://localhost:8000/ws?id=${sid.value}`
			// 	setTimeout(() => {
			// 		console.log('WebSocket服务器重连成功')
			// 		weburl.value = `ws://localhost:8000/ws?id=${sid.value}`
			// 	}, 2000)
			// }
			// 进行重连
			// setTimeout(function() {
			// 	uni.connectSocket({
			// 		url: service
			// 	});
			// }, 4000);
			// }

			//卸载前销毁定时器
			// onUnmounted(() => {
			// 	clearInterval(timer)
			// })

			//把图片转为base64链接
			// function openChooseImg() {
			// 	uni.chooseImage({
			// 		count: 1, //count: 6, //默认9
			// 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 		sourceType: ['album'], //从相册选择
			// 		success: function(res) {
			// 			console.log(JSON.stringify(res.tempFilePaths));
			// 			//解决跨越问题，让通过微信上传的图片你能够展示在浏览器前端
			// 			uni.getImageInfo({
			// 				src: res.tempFilePaths[0],
			// 				success: (path) => {
			// 					pathToBase64(path.path).then(base64 => {
			// 							console.log("base64=" + base64); // 这就是转为base64格式的图片
			// 							base64data.value = base64
			// 							uni.request({
			// 								url: 'http://127.0.0.1:3366/tyh/webscoketadd',
			// 								method: 'POST',
			// 								data: {
			// 									user_id: sid.value,
			// 									from_id: id.value,
			// 									type: type.value,
			// 									avater: img.value,
			// 									// content: e.detail.value,
			// 									baseimg: base64data.value,
			// 									status: false
			// 								},
			// 								success: (res) => {
			// 									// console.log(res,'333333333')
			// 									// datas.data = res.data.data
			// 									// this.text = 'request success';
			// 								},
			// 							})
			// 							uni.sendSocketMessage({
			// 								data: JSON.stringify({
			// 									value: '',
			// 									id: id.value,
			// 									type: 'receive',
			// 									mode: 'MESSAGE',
			// 									baseimg: base64data.value
			// 								}),
			// 							});
			// 							chatList.value.push({
			// 								avatar: img.value,
			// 								baseimg: base64data.value,
			// 								type: 'right'
			// 							});
			// 						})
			// 						.catch(error => {
			// 							console.error(error)
			// 						})
			// 				}
			// 			})
			// 		},
			// 	});
			// }

			// //发送视频
			// function openChooseVideo() {
			// 	uni.chooseVideo({
			// 		compressed: true,
			// 		sourceType: ['camera', 'album'],
			// 		maxDuration: 30,
			// 		success: function(res) {
			// 			uni.getVideoInfo({
			// 				src: res.tempFilePath,
			// 				success: (path) => {
			// 					console.log(src, '1111111111111111')
			// 					pathToBase64(path.path).then(base64 => {
			// 						console.log("base64=" + base64); // 这就是转为base64格式的视频
			// 						basevideo.value = base64
			// 					})
			// 				}
			// 			})
			// 		}
			// 	});
			// }




			//发送视频
			// function openChooseVideo() {
			// 	uni.chooseVideo({
			// 		compressed: true,
			// 		sourceType: ['camera', 'album'],
			// 		maxDuration: 30,
			// 		success: function(res) {
			// 			if (res.size > (1024 * 1024 * 50)) {
			// 				this.showToast("视频文件过大，请重新上传")
			// 				return false
			// 			}
			// 			// 获取到视频路径
			// 			console.log(JSON.stringify(res.tempFilePath));
			// 			// let video = JSON.stringify(res.tempFilePath)
			// 			// console.log(video,'dddddddddddddddddddddddd')
			// 			// basevideo.value = video
			// 			uni.getVideoInfo({
			// 				src: res.tempFilePath,
			// 				success: (path) => {
			// 					pathToBase64(path.path).then(base64 => {
			// 						console.log("base64=" + base64); // 这就是转为base64格式的视频
			// 						function dataURLtoFile(dataurl, filename) {
			// 							let arr = dataurl.split(','),
			// 								mime = arr[0].match(/:(.*?);/)[1]
			// 							let bstr = atob(arr[1])
			// 							console.log(bstr,'1111111111111111111')
			// 							return bstr
			// 						}
			// 						dataURLtoFile(base64)
			// 						// basevideo.value = base64
			// 					})
			// uni.request({
			// 	url: 'http://127.0.0.1:3366/tyh/webscoketadd',
			// 	method: 'POST',
			// 	data: {
			// 		user_id: sid.value,
			// 		from_id: id.value,
			// 		type: type.value,
			// 		avater: img.value,
			// 		// content: e.detail.value,
			// 		// baseimg: base64data.value,
			// 		basevideo:basevideo.value,
			// 		status: false
			// 	},
			// 	success: (res) => {
			// 		console.log(res,'333333333')
			// 		// datas.data = res.data.data
			// 		// this.text = 'request success';
			// 	},
			// })
			// uni.sendSocketMessage({
			// 	data: JSON.stringify({
			// 		value: '',
			// 		id: id.value,
			// 		type: 'receive',
			// 		mode: 'MESSAGE',
			// 		baseimg: base64data.value,
			// 		basevideo:basevideo.value
			// 	}),
			// });
			// 				}
			// 			})
			// 		}
			// 	});
			// }

			//更新每个用户接收到的消息次数
			// function gitlist() {
			// 	uni.request({
			// 		url: 'http://127.0.0.1:3366/tyh/chatupdate',
			// 		method: 'POST',
			// 		data: {
			// 			id: id.value,
			// 			is_read: true
			// 		},
			// 		success: (res) => {
			// 			// console.log(res,'333333333')
			// 			// datas.data = res.data.data
			// 			// this.text = 'request success';
			// 		},
			// 	})
			// }


			// function scrollBottom() {
			// 	setTimeout(() => {
			// 		const listLen = chatList.value.length;
			// 		if (listLen > 0) {
			// 			const el = item[0];
			// 			document.scrollToElement(el, {
			// 				offset: 0,
			// 				animated: false
			// 			});
			// 		}
			// 	}, 30);
			// }

			// /**
			//  * @description 初始化
			//  */
			// function init() {
			// 	scrollBottom();
			// }
			// /**
			//  * @description 输入框聚焦
			//  * @param {Object} e 键盘参数
			//  */
			// function focusInput(e) {
			// 	emojiShow.value = false;
			// }
			// /**
			//  * @description 键盘输入
			//  * @param {Object} e 输入框参数
			//  */
			function getInputText(e) {
				inputText.value = e.detail.value;
			}
			// /**
			//  * @description 键盘高度发生变化
			//  * @param {Object} e 键盘参数
			//  */
			// function changeKeyboardHeight(e) {
			// 	if (true) {
			// 		chatListHeight.value = systemInfo.value.windowHeight - bottomActionHeight.value - e.detail.height;
			// 	}

			// 	if (e.detail.height > 0 && emojiShow.value) emojiShow.value = false;
			// }
			// /**
			//  * @description 完成输入
			//  * @param {Object} e 输入框参数
			//  */

			// /**
			//  * @description 打开表情符号
			//  */
			// function openEmoji() {
			// 	emojiShow.value = true;
			// 	chatListHeight.value = systemInfo.value.windowHeight - bottomActionHeight.value - keyboardConfig.value
			// 		.height.value;
			// 	scrollBottom();
			// 	uni.hideKeyboard();
			// }
			// /**
			//  * @description 关闭表情符号
			//  */
			// function closeEmoji() {
			// 	emojiShow.value = false;
			// 	chatListHeight.value = systemInfo.value.windowHeight - bottomActionHeight.value;
			// 	scrollBottom();
			// }
			// /**
			//  * @description 选择表情符号
			//  * @param {String} item 选择的内容
			//  */
			// function selEmoji(item) {
			// 	inputText.value += item;
			// }
			// /**
			//  * @description 滚动至底部
			//  */

			const imageError = () => {

			}

			return {
				// emoji,
				// emojiShow,
				// systemInfo,
				// keyboardConfig,
				// bottomActionHeight,
				// chatListHeight,
				inputText,
				// chatList,
				// focusInput,
				getInputText,
				// changeKeyboardHeight,
				confirmInput,
				// openEmoji,
				// closeEmoji,
				// selEmoji,
				// scrollBottom,
				// item,
				// name,
				// datas,
				// base64data,
				// basevideo,
				chatlist,
				scrollToView,
				sid,
				id,
				imageError,
				scrollTo
			}
		}
	}
</script>

<style scoped>
	.topname {
		width: 100%;
		height: 4vh;
		background-color: #b1afb4;
		text-align: center;
		line-height: 4vh;
		font-size: 35rpx;
	}

	.video {
		width: 300rpx;
		height: 200rpx;
		border-radius: 30rpx;
	}

	.list {
		width: 750rpx;
		background-color: #F3F5F8;
	}

	.list .item {
		padding: 15rpx 30rpx;
		display: flex;
	}

	.list .item .avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.list .item .content {
		line-height: 40rpx;
		font-size: 28rpx;
		padding: 20rpx;
	}

	.list .item.left {
		flex-direction: row;
	}

	.list .item.right {
		flex-direction: row-reverse;
	}

	.list .item.left .content {
		color: #333333;
		background-color: #FFFFFF;
		border-radius: 2rpx 20rpx 20rpx 20rpx;
		margin-left: 20rpx;
	}

	.list .item.right .content {
		color: #FFFFFF;
		background-color: #2472FF;
		border-radius: 2rpx 20rpx 20rpx 20rpx;
		text-align: right;
		margin-right: 20rpx;
	}

	.bottomAction {
		width: 750rpx;
		background-color: #cac5cc;
		position: fixed;
		bottom: 0;
	}

	.bottomAction .main {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.bottomAction .main .textInput {
		width: 430rpx;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 28rpx;
		background-color: #F3F5F8;
		border-radius: 10rpx;
		padding: 0 24rpx;
	}

	.bottomAction .main .emojiIcon {
		width: 62rpx;
		height: 62rpx;
		margin-left: 16rpx;
	}

	.bottomAction .main .voice {
		width: 52rpx;
		height: 52rpx;
		margin-right: 20rpx;
		margin-left: -75rpx;
		border: 1px solid black;
		border-radius: 50%;
	}

	.bottomAction .main .voice-img {
		width: 42rpx;
		height: 42rpx;
		line-height: 52rpx;
		margin-top: 5rpx;
		margin-left: 4rpx;
	}

	.bottomAction .main .more {
		width: 52rpx;
		height: 52rpx;
		margin-left: 15rpx;
		margin-right: -75rpx;
		border: 1px solid black;
		border-radius: 50%;
	}

	.bottomAction .main .more-img {
		width: 42rpx;
		height: 42rpx;
		line-height: 52rpx;
		margin-top: 5rpx;
		margin-left: 5rpx;
	}

	.bottomAction .emoji {
		width: 750rpx;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.bottomAction .emoji .icon {
		width: 80rpx;
		height: 80rpx;
		font-size: 48rpx;
	}

	.baseimg {
		width: 300rpx;
		height: 300rpx;
		border-radius: 15%;
		margin-right: 20rpx;
	}

	.chat-popup-content .section {
		/* height: 40vh; */
		overflow-y: auto;
	}

	.chat-popup-content .section .content {
		padding: 0px 10px;
		box-sizing: border-box;
	}

	.chat-popup-content .section .content .left {
		display: flex;
		justify-content: flex-start;
		margin-bottom: 15px;
	}

	.chat-popup-content .section .content .left .img {
		height: 40px;
		width: 40px;
		border-radius: 50%;
		border: 1px solid #ccc;
		margin-right: 10px;
	}

	.chat-popup-content .section .content .left .content {
		border: 1px solid #ccc;
		display: flex;
		align-items: center;
		padding: 5px 10px;
		box-sizing: border-box;
		border-radius: 5px;
	}

	.chat-popup-content .section .content .right {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 15px;
	}

	.chat-popup-content .section .content .right .img {
		height: 40px;
		width: 40px;
		border-radius: 50%;
		border: 1px solid #ccc;
		margin-left: 10px;
	}

	.chat-popup-content .section .content .right .content {
		border: 1px solid #ccc;
		display: flex;
		align-items: center;
		padding: 5px 10px;
		box-sizing: border-box;
		border-radius: 5px;
		background-color: aliceblue;
	}
</style>